<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            padding: 0;
            margin: 0;
            font-family: "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
        }

        /* 侧边栏（折叠+导航高亮） */
        .sidebar {
            width: 250px;
            height: 100vh;
            background-color: #f8f9fa;
            border-right: 1px solid #eee;
            color: #333;
            padding: 2rem 1rem;
            position: fixed;
            top: 0;
            left: 0;
            transition: width 0.3s ease;
            z-index: 100;
        }
        .sidebar.collapsed { width: 80px; }

        .toggle-btn {
            background: none;
            border: none;
            color: #666;
            font-size: 1.2rem;
            position: absolute;
            top: 1rem;
            right: -15px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        .toggle-btn:hover { transform: rotate(90deg); }

        .sidebar h3 {
            text-align: center;
            margin-bottom: 2rem;
            border-bottom: 1px solid #eee;
            padding-bottom: 1rem;
            transition: opacity 0.3s ease;
            color: #6ea8f5;
        }
        .sidebar.collapsed h3 span { display: none; }
        .sidebar.collapsed h3::after { content: '菜单'; }

        .sidebar ul { list-style: none; padding: 0; margin-top: 2rem; }
        .sidebar li { margin-bottom: 0.5rem; }
        .sidebar a {
            color: #666;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        .sidebar a i {
            width: 20px;
            text-align: center;
            color: #8ab4f8;
        }
        /* 导航高亮（当前选中/hover） */
        .sidebar a:hover, .sidebar a.active {
            background-color: #e8f0fe;
            color: #6ea8f5;
            font-weight: 500;
        }
        .sidebar a.active i { color: #6ea8f5; }

        .sidebar.collapsed a span { display: none; }
        .sidebar.collapsed a { justify-content: center; }

        /* 主内容区（滚动渐显） */
        .main-content {
            margin-left: 250px;
            padding: 3rem;
            background-color: #fff;
            min-height: 100vh;
            transition: margin-left 0.3s ease;
        }
        .sidebar.collapsed ~ .main-content { margin-left: 80px; }

        /* 欢迎文字动画 */
        .welcome-message {
            color: #333;
            font-size: 2.2rem;
            font-weight: 600;
            animation: fadeInUp 0.8s ease-out;
            margin-bottom: 3rem;
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 滚动渐显元素（初始隐藏） */
        .fade-in-section {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            margin-bottom: 3rem;
            padding: 2rem;
            background-color: #f8f9fa;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        /* 滚动到视图时显示 */
        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* 退出按钮动效 */
        .btn-logout {
            transition: all 0.3s ease;
            margin-top: 2rem;
            padding: 0.75rem 1.5rem;
            border-radius: 25px;
            background-color: #fef2f2;
            color: #dc3545;
            border: none;
        }
        .btn-logout:hover {
            background-color: #fee2e2;
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.1);
        }

        /* 管理员专属样式 */
        .admin-tag {
            display: inline-block;
            background-color: #e8f0fe;
            color: #6ea8f5;
            font-size: 0.8rem;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            margin-left: 10px;
            font-weight: 500;
        }
    </style>
</head>
<body>
<!-- 侧边栏：按角色显示不同导航 -->
<div class="sidebar">
    <button class="toggle-btn">
        <i class="fas fa-chevron-left"></i>
    </button>
    <h3><span>系统导航</span></h3>
    <ul>
        <!-- 所有角色都显示：仪表盘 -->
        <li><a href="#" class="active"><i class="fas fa-tachometer-alt"></i> <span>仪表盘</span></a></li>

        <!-- 仅管理员显示：用户管理、权限设置 -->
        <li th:if="${role == 'ROLE_ADMIN'}"><a href="#"><i class="fas fa-users"></i> <span>用户管理</span></a></li>
        <li th:if="${role == 'ROLE_ADMIN'}"><a href="#"><i class="fas fa-shield-alt"></i> <span>权限设置</span></a></li>

        <!-- 所有角色都显示：操作日志 -->
        <li><a href="#"><i class="fas fa-history"></i> <span>操作日志</span></a></li>

        <!-- 仅管理员显示：管理后台入口 -->
        <li th:if="${role == 'ROLE_ADMIN'}">
            <a href="/admin" style="background-color: #e8f0fe; color: #6ea8f5;">
                <i class="fas fa-user-shield"></i> <span>管理后台</span>
            </a>
        </li>
    </ul>
</div>

<!-- 主内容区：按角色显示不同内容 -->
<div class="main-content">
    <!-- 欢迎语：显示用户名+角色标识 -->
    <h1 class="welcome-message">
        <span th:text="'欢迎回来，' + ${username} + '！'">欢迎回来，admin！</span>
        <span class="admin-tag" th:if="${role == 'ROLE_ADMIN'}">管理员</span>
    </h1>

    <!-- “公告列表”“文件下载” 的入口 -->
    <div class="mt-4">
        <a href="/content/announcement/list" class="btn btn-outline-primary me-3">查看社区公告</a>
        <a href="/content/file/list" class="btn btn-outline-secondary">下载社区文件</a>
    </div>

    <!-- 所有角色都显示：数据概览 -->
    <div class="fade-in-section">
        <h3><i class="fas fa-chart-pie text-primary me-2"></i>数据概览</h3>
        <p class="mt-2 text-muted">当前系统共有用户 238 人，今日新增登录 45 次，操作日志 126 条，各项数据均正常。</p>
    </div>

    <!-- 所有角色都显示：最新通知 -->
    <div class="fade-in-section">
        <h3><i class="fas fa-bell text-warning me-2"></i>最新通知</h3>
        <p class="mt-2 text-muted">系统将于今晚 23:00-00:00 进行维护升级，期间可能暂停服务，请提前做好准备。</p>
    </div>

    <!-- 按角色显示不同待办事项 -->
    <div class="fade-in-section">
        <h3><i class="fas fa-tasks text-success me-2"></i>待办事项</h3>
        <ul class="mt-2 text-muted">
            <!-- 普通用户待办 -->
            <th:block th:if="${role == 'ROLE_USER'}">
                <li>1. 完善个人资料（未完成）</li>
                <li>2. 查看最新系统使用指南</li>
                <li>3. 反馈使用过程中的问题</li>
            </th:block>

            <!-- 管理员待办 -->
            <th:block th:if="${role == 'ROLE_ADMIN'}">
                <li>1. 审核新用户注册申请（3 条）</li>
                <li>2. 导出上月操作日志报表</li>
                <li>3. 更新系统权限配置</li>
            </th:block>
        </ul>
    </div>

    <!-- 退出登录按钮（所有角色都显示） -->
    <a href="/logout" class="btn-logout">
        <i class="fas fa-sign-out-alt me-1"></i> 退出登录
    </a>

</div>

<!-- 侧边栏折叠 + 滚动渐显JS（完整保留） -->
<script>
    // 1. 侧边栏折叠逻辑
    const toggleBtn = document.querySelector('.toggle-btn');
    const sidebar = document.querySelector('.sidebar');
    const icon = toggleBtn.querySelector('i');
    toggleBtn.addEventListener('click', () => {
        sidebar.classList.toggle('collapsed');
        icon.classList.toggle('fa-chevron-left');
        icon.classList.toggle('fa-chevron-right');
    });

    // 2. 滚动渐显逻辑（补全核心代码）
    const fadeElements = document.querySelectorAll('.fade-in-section');
    function checkFade() {
        fadeElements.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;
            const elementVisible = 150; // 元素顶部距离视口150px时触发显示
            if (elementTop < window.innerHeight - elementVisible) {
                element.classList.add('is-visible');
            }
        });
    }
    // 页面加载时先检查一次（避免顶部元素不显示）
    window.addEventListener('load', checkFade);
    // 滚动时持续检查
    window.addEventListener('scroll', checkFade);
</script>
</body>
</html>